$(function(){
    // 首页数据渲染
    var currentPage = 1; //记录当前页 
    var pageSize = 3; // 一页三条数据
    function renger(){
        $.ajax({
            type: 'get',
            url: '/category/queryTopCategoryPaging',
            data: {
              page: currentPage,
              pageSize: pageSize
            },
            dataType: 'json',
            success: function (res) {
              console.log(res);
              // 渲染
              $('tbody').html(template('tmp', res));
              // 根据数据库真实的总数，生成分页标签 
              setPage(res.total);
            }
          })
    }
    renger();

    // 分页功能
    function setPage (total) {
      $("#paginator").bootstrapPaginator({
        bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
        currentPage: currentPage, //设置高亮分页标签按钮 
        totalPages: Math.ceil(total / pageSize), // 设置 要生成多少个分页按钮
        onPageClicked: function (event, originalEvent, type, page) {
          //为按钮绑定点击事件 page:当前点击的按钮页码
          // 改变当前页取值 
          currentPage = page;
          // 重新渲染
          renger();
        }
      });
    }
    // / 3- 表单非空校验
    // 使用表单校验插件
    $('.add-form').bootstrapValidator({
      //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
      excluded: [':disabled', ':hidden', ':not(:visible)'],
  
      //2. 指定校验时的图标显示，默认是bootstrap风格
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
  
      //3. 指定校验字段
      fields: {
        //校验用户名，对应name表单的name属性
        categoryName: {
          validators: {
            //不能为空
            notEmpty: {
              message: '请输入一级分类名称'
            }
          }
        }
      }
  
    });

     // 4-添加一级分类到数据库
  // 1-点击添加按钮，获取表单数据，在表单数据合理的情况下，发送数据给后台，进行添加
  // 2-添加完成后，页面重新渲染，隐藏模态框， 表单重置 ...
  // 插件提供 success.form.bv 事件， 在点击提交 按钮 并数据校验通过时触发
  $('.add-form').on('success.form.bv', function (e) {
    // 阻止提交按钮 的默认行为 
    e.preventDefault();
    // ajax提交  
    $.ajax({
      type: 'post',
      url: '/category/addTopCategory',
      data: $('.add-form').serialize(),
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 页面重新渲染第一页的数据， 要看到新添加的数据    
        currentPage = 1;
        render();
        // 隐藏模态框
        $('.modal-add').modal('hide');
        // 重置表单的数据和样式 
        // $('.add-form')[0].reset();
        // 重置样式 通过插件实例 去调用插件重置方法 resetForm(是否重置数据); 默认值false  
        $('.add-form').data('bootstrapValidator').resetForm(true);
      }
    })
  })
})